<template>
    <div class="taxData" ref="taxdata">

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const taxdata = ref(null)
var name_flag = 0;
var data = [{
    "value": "1046",
    "name": "增值税",

},
{
    "value": "903",
    "name": "资源税",

},
{
    "value": "784",
    "name": "个人所得税",

},
{
    "value": "683",
    "name": "城建税",

},
{
    "value": "659",
    "name": "教育费附加",

},
{
    "value": 1488,
    "name": "地方教育费附加",

}
];
var option = {
    "legend": {
        "orient": "horizontal",
        "y": "bottom",
        "x": "center",
        "data": ["增值税", "资源税", "个人所得税", "城建税", "教育费附加", "地方教育费附加"],
        "itemWidth": 10,
        "itemHeight": 10,
        "textStyle": {
            "color": "#fff"
        },
    },
    "title": [{
        "show": true,
        "text": "",
        "textStyle": {
            "color": "white",
            "fontSize": 14,
            "fontStyle": "normal",

        },
        "top": "44%",
        "left": "center"
    },
    {
        "show": true,
        "text": "",
        "textStyle": {
            "color": "white",
            "fontSize": 20,
            "fontStyle": "normal",
            "fontWeight": "bold"
        },
        "top": "50%",
        "left": "center"
    },
    ],
    tooltip: {
        trigger: 'item',
        formatter: "{b} <br/>数量:{c} ({d}%)",
        textStyle: {
            // fontSize: 36,
            fontWeight: 'bold',
            color: 'white',
        },
    },
    //自己设置扇形图颜色
    series: [{
        name: '税种明细',
        type: 'pie',
        //位置
        center: ['50%', '50%'],
        radius: ['30%', '50%'],
        avoidLabelOverlap: false,
        selectedOffset: 25,
        hoverAnimation: false,
        itemStyle: {
            normal: {
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
            }
        },
        labelLine: {

            length: 7,
            length2: 30,
            lineStyle: {
                width: 1
            }
        },
        label: {
            fontSize: '16',
            color: 'white'
        },
        data: data
    },
    {
        name: '税种明细',
        type: 'pie',
        radius: '30%',
        z: 1,
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            emphasis: {
                label: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            }
        },
        color: ['rgba(0,0,0,0)'],
        data: [{
            value: 100,
            tooltip: {
                show: false
            }
        },]
    }
    ]
};


onMounted(() => {
    var myChart = echarts.init(taxdata.value);
    var timeTicket = null;
    timeTicket = setInterval(() => {
        if (name_flag > 5) {
            myChart.dispatchAction({
                type: 'pieUnSelect',
                seriesIndex: 0,
                dataIndex: 5
            });
            name_flag = 0;
        }
        myChart.dispatchAction({
            type: 'pieSelect',
            seriesIndex: 0,
            dataIndex: name_flag
        });
        if (name_flag !== 0) {
            myChart.dispatchAction({
                type: 'pieUnSelect',
                seriesIndex: 0,
                dataIndex: name_flag - 1
            });
        }
        option.title[0].text = option.series[0].data[name_flag].name;
        option.title[1].text = option.series[0].data[name_flag].value;
        myChart.setOption(option);
        name_flag++;
    }, 2000);
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

})
</script>

<style scoped lang="scss">
.taxData{
    width: 100%;
    height: 90%;
    margin-top: 10px;
}
</style>
